{% extends 'surveillanceapp/base.html' %}
{% load static %}

{% block extracss %}
    <style>
        .video-clickable:hover{
                background: #dddddd;
            }
        .video-clickable{
            cursor: pointer;
        }
        #station-detailinfo{
            font-size: 150%;
        }
    </style>
{% endblock %}

{%  block main-content %}

    <!--station detail start -->
    <!--overview start-->
    <div class="row">
        <div class="col-lg-12" style="margin-bottom: 0%;">
            <ol class="breadcrumb" style="margin-bottom: 0%;">
              <li><i class="fa fa-home"></i><a href="{% url 'surveillanceapp:index' %}">Home</a></li>
                <li><i class="fas fa-map-marked-alt"></i><a href="{% url 'surveillanceapp:stationlist' %}">Stations</a></li>
              <li><i class="fas fa-map-marker-alt"></i>{{ station.station_name }}</li>
            </ol>
        </div>
        <div class="col-lg-12" style="margin-top: 0%;">
            <!-- station map starts here -->
            <div id="station-map" style="width:auto;height:150px;"></div>
            <!-- station map ends here -->
        </div>
    </div>
    <!-- station detail starts here -->
    <div class="row" style="margin-top: 0%;">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-taxi"></i> Station Details
                </div>
                <div class="panel-body">
                    <div class="col-lg-7">
                        <div class="bio-graph-info" id="station-detailinfo">

                            <div class="bio-row">
                                <p><span>Station ID </span>: <strong>{{ station.station_id }}</strong></p>
                            </div>
                            <div class="bio-row">
                                <p><span>Name </span>: <strong>{{ station.station_name }}</strong> </p>
                            </div>
                            <div class="bio-row">
                                <p><span>Latitude</span>: <strong>{{ station.lat_pos|floatformat:5 }}</strong></p>
                            </div>
                            <div class="bio-row">
                                <p><span>Longitude</span>: <strong>{{ station.lon_pos|floatformat:5 }}</strong></p>
                            </div>

                        </div>
                    </div>
                    <!-- station pic here -->
                    <div class="col-lg-5">
                        <img class="img-responsive center-block" src="{% static station.station_pic.url %}" alt="{{ station.station_name }}" style="height: 150px;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- station detail ends here -->

    <!-- surveillance video list starts here -->
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="panel">
                <div class="panel-heading" style="background: #394a59; color: #fff;">
                    <h2><i class="fa fa-camera"></i>  <strong>Surveillance Videos</strong></h2>
                </div>
                <div class="panel-body ">
                    {%  for video in videolist %}
                        <div class="panel-body video-clickable col-lg-12" data-href="{% url 'surveillanceapp:video' station.station_id video.video_id %}">
                             <div class="col-lg-3">
                                 <img src="{% static video.thumbnail_filename %}" style="width: 100%;">
                             </div>
                             <div class="col-lg-3" style="text-align: center;">
                                 Published:
                                <h3><strong>{{ video.timestamp }}</strong></h3>
                             </div>
                             <div class="col-lg-3" style="text-align: center;">
                                 Duration:
                                 <h3><strong class="video-duration" data-duration="{{ video.duration }}"></strong></h3>
                             </div>
                             <div class="col-lg-3" style="text-align: center;">
                                 <p>Analysis Progress:</p>
                                 <div class="progress thin" style="margin: 5%; background: #394a59;">
                                    <div class="progress-bar" role="progressbar" style="width: {{ video.analysed_percentage }}%; background: #d8ab5a;">
                                        {{ video.analysed_percentage }}%
                                    </div>
                                 </div>
                             </div>
                        </div>
                    {% endfor %}
                </div>

            </div>
        </div>
    </div>
    <!-- surveillance video list ends here -->

{% endblock %}

{% block extrajs %}
    <!-- map script-->
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBAUsak2E8DcVtc3hUtrg06-pPHER8LXdk&callback=initMap">
    </script>
    <script>
        //initialize map
        var map;
        //videos
        var videos = document.querySelectorAll('.video-clickable');
        var durations = document.querySelectorAll('.video-duration');
        {#var progresses = document.querySelectorAll('.video-progress');#}

        durations.forEach(function (duration) {
            value = parseInt(duration.getAttribute('data-duration'));
            minutes = Math.floor(value/60);
            seconds = value-minutes*60;
            duration.textContent = minutes.toString()+' min '+seconds.toString()+' sec'
        });

        {#progresses.forEach(function (progress) {#}
        {#    total = parseInt(progress.getAttribute('data-duration'));#}
        {#    analysed = parseInt(progress.getAttribute('data-analysed'));#}
        {#    console.log('This video has been analysed for: '+analysed+' seconds');#}
        {#    value = Math.round((analysed/total)*100);#}
        {#    progress.style.width = value.toString()+'%';#}
        {#    progress.textContent = value.toString()+'%';#}
        {##}

        function initMap() {
            //get station coordinates in js object
            var coords = {
                lat: {{ station.lat_pos }},
                lng:{{ station.lon_pos }}
            };
            map = new google.maps.Map(
                document.getElementById('station-map'),
                {   zoom: 17,
                    center: coords,
                    zoomControl:false,
                    scaleControl:false,
                    panControl:false}
                );
            var iw=new google.maps.InfoWindow();  //initialize info window
            var marker = new google.maps.Marker({ position: coords, map: map }); //show the marker in map
            //marker onclick event handler
            marker.addListener('click',function(){
                iw.setContent('{{ station.station_name }}');
                iw.open(map, marker);
            });
        }
        videos.forEach(function (video) {
            video.addEventListener('click',function () {
                window.location.href = this.getAttribute('data-href');
            })
        });
    </script>

{% endblock %}